<template>
  <div class="standards-management-container">
    <el-card class="search-card">
      <!-- 搜索条件区域 - 改为纵向排列 -->
      <div class="search-filters">
        <!-- 行业筛选 -->
        <div class="filter-group">
          <span class="filter-label">行业：</span>
          <span 
            class="all-button"
            :class="{ 'active': selectedIndustry === '' || selectedIndustry === null || selectedIndustry === undefined }"
            @click="handleAllButtonClick('industry')"
          >
            全部
          </span>
          <el-radio-group v-model="selectedIndustry" size="small" @change="handleChangehy">
            <el-radio-button v-for="item in industryOptions" :key="item.id" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 分类筛选 -->
        <div class="filter-group">
          <span class="filter-label">分类：</span>
          <span 
            class="all-button"
            :class="{ 'active': selectedCategory === '' || selectedCategory === null || selectedCategory === undefined }"
            @click="handleAllButtonClick('category')"
          >
            全部
          </span>
          <el-radio-group v-model="selectedCategory" size="small" @change="handleCategoryChange">
            <el-radio-button v-for="item in categoryOptions" :key="item.id" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 状态筛选 -->
        <div class="filter-group">
          <span class="filter-label">状态：</span>
          <span 
            class="all-button"
            :class="{ 'active': selectedStatus === '' || selectedStatus === null || selectedStatus === undefined }"
            @click="handleAllButtonClick('status')"
          >
            全部
          </span>
          <el-radio-group v-model="selectedStatus" size="small" @change="handleFilterChange">
            <el-radio-button v-for="item in statusOptions" :key="item.dictValue" :label="item.dictValue">
              {{ item.dictLabel }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 关键词搜索 -->
        <div class="search-input-group">
          <span class="filter-label">查询：</span>
          <el-input v-model="searchQuery" placeholder="请输入查询内容" size="small" prefix-icon="el-icon-search"
            :clearable="true" style="width: 300px;" @keyup.enter.native="QueryList"></el-input>
          
           <button type="primary" size="small" @click="QueryList" icon="el-icon-refresh-left" class="resetbutton2">
            <i class="el-icon-search"></i>
            <span>查询</span>
          </button>
          <button type="primary" size="small" @click="handleReset" icon="el-icon-refresh-left" class="resetbutton">
            <i class="el-icon-refresh-left"></i>
            <span>重置</span>
          </button>
        </div>
      </div>
    </el-card>

    <!-- 结果区域 -->
    <el-card class="result-card" style="border: none;">
      <div v-for="(item, index) in standardList.rows" :key="index" class="standard-item"
        @click="handleDetailClick(item)">
        <!-- 第一行：标题和标签 -->
        <div class="first-row">
          <div class="standard-title">{{ item.title }}</div>
          <div class="tags-container">
            <span v-for="(tag, tagIndex) in item.baseBusinessIndusty" :key="tagIndex" class="tag"><span>{{ tag.name
                }}</span></span>
          </div>
        </div>
        <!-- 第二行：浏览量、标准编号和日期信息 -->
        <div class="second-row">
          <div class="left-info">
            <span class="view-count"><i style="margin-right: 3px;" class="el-icon-view"></i>浏览量 {{ item.browseNum
              }}</span>
            <span class="standard-number">标准编号：{{ item.normCode }}</span>
          </div>
          <div class="date-info">
            <span class="publish-date">发布日期 {{ item.publishDate }}</span>
            <span class="date-separator">|</span>
            <span class="implement-date">实施日期 {{ item.implementDate }}</span>
          </div>
        </div>
      </div>
      <!-- 查看更多按钮 -->
      <div v-if="hasMore && !isLoading" class="load-more-container">
        <span 
          class="load-more-button"
          @click="loadMore"
        >
          查看更多
        </span>
      </div>
      <!-- 加载中状态 -->
      <div v-if="isLoading" class="load-more-container">
        <span class="load-more-button">
          加载中...
        </span>
      </div>

    </el-card>
  </div>
</template>

<script>
import { getDictList, getIndustryCategory, getStandardList } from '../api/user';
export default {
  name: 'StandardsManagement',
  data() {
      return {
        // 筛选条件选项
        industryOptions: [],
        categoryOptions: [],
        statusOptions: [],
        // 修改1: 初始化为对象，包含total属性
        standardList: { total: 0, rows: [] },
        // 选中的筛选条件
        selectedIndustry: '',
        selectedCategory: '',
        selectedStatus: '',
        searchQuery: '',
        currentPage: 1,
        pageSize: 10,
        // 是否还有更多数据可加载
        hasMore: true,
        // 是否正在加载数据
        isLoading: false,
      };
  },
  created() {
    this.getDictlists();
    this.gethyeList();
    this.QueryList();
  },
  methods: {
      // 处理筛选条件变化
      handleChangehy(value) {
        this.selectedIndustry = value;
      },
      handleCategoryChange(value) {
        this.selectedCategory = value;
      },
      handleFilterChange(value) {
        this.selectedStatus = value;
      },
      // 处理全部按钮点击
      handleAllButtonClick(type) {
        if (type === 'industry') {
          this.selectedIndustry = '';
        } else if (type === 'category') {
          this.selectedCategory = '';
        } else if (type === 'status') {
          this.selectedStatus = '';
        }
        this.QueryList();
      },
    // 处理重置
    handleReset() {
      this.selectedIndustry = '';
      this.selectedCategory = '';
      this.selectedStatus = '';
      this.searchQuery = '';
      this.$message.success('筛选条件已重置', 1000);

      this.QueryList();
    },

    // 根据value获取option的label
    getOptionLabel(value, options) {
      const option = options.find(item => item.value === value);
      return option ? option.label : value;
    },

    getDictlists() {
      getDictList("industry_status").then(res => {
        // console.log(res);
        if (res.code === 200) {
          this.statusOptions = res.data;
        } else {
          // this.$message.error('获取状态信息失败', 1000);
          console.log('获取状态信息失败:', res);
        }
      })
    },
    // 获取行业分类列表
    gethyeList() {
      getIndustryCategory()
        .then(res => {
          // console.log(res);
          // 检查res和res.data是否存在
          if (!res || !res.data || !Array.isArray(res.data)) {
            console.error('数据格式错误:', res);
            return;
          }
          this.industryOptions = res.data

          // 方法1: 根据id或name查找目标数据（推荐）
          // 假设我们需要查找id为1的"通信"分类下的子分类
          const targetItem = res.data.find(item => item.id === 1 || item.name === '通信');

          // 如果找到了目标项且它有childArray，就使用它
          if (targetItem && targetItem.childArray) {
            this.categoryOptions = targetItem.childArray;
          } else {
            // 备选方案: 使用第一个有childArray的项
            const firstValidItem = res.data.find(item => item.childArray && Array.isArray(item.childArray));
            if (firstValidItem) {
              this.categoryOptions = firstValidItem.childArray;
            } else {
              // 如果都找不到，使用默认空数组避免报错
              this.categoryOptions = [];
              console.warn('未找到有效的分类数据');
            }
          }
        })
        .catch(error => {
          console.error('获取行业分类数据失败:', error);
          this.categoryOptions = []; // 出错时设置为空数组
        })
    },

    // 筛选条件变化时触发的方法
    // QueryList(){
    //   getStandardList({
    //     title: this.searchQuery,
    //     industryId: this.selectedIndustry,
    //     status: this.selectedStatus,
    //     type:1,
    //     pageSize: this.pageSize,
    //     pageNum: this.currentPage,
    //   }).then(res => {
    //     console.log(res);
    //     if (res.code === 200) {
    //       this.standardList = res.rows
    //     } else {
    //       this.$message.error('查询列表失败')
    //     }
    //   })
    // },
    QueryList() {
      // 设置加载状态
      this.isLoading = true;
      // 重置页码
      this.currentPage = 1;
      
      getStandardList({
        type: 2,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        ...(this.searchQuery && this.searchQuery.trim() !== '' ? { title: this.searchQuery } : {}),
        // 优先使用分类选择的值作为industryId，如果分类未选择则使用行业选择的值
        ...((this.selectedCategory && this.selectedCategory !== '' && this.selectedCategory !== null && this.selectedCategory !== undefined) ? 
           { industryId: this.selectedCategory } : 
           (this.selectedIndustry && this.selectedIndustry !== '' && this.selectedIndustry !== null && this.selectedIndustry !== undefined ? 
            { industryId: this.selectedIndustry } : {})),
        ...(this.selectedStatus && this.selectedStatus !== '' && this.selectedStatus !== null && this.selectedStatus !== undefined ? { status: this.selectedStatus } : {})
      }).then(res => {
        // console.log(res);
        if (res.code === 200) {
          // 修改2: 正确赋值，保留total和rows结构
          this.standardList = {
            total: res.total || 0,
            rows: res.rows || []
          };
          // 检查是否还有更多数据
          this.hasMore = this.standardList.rows.length < this.standardList.total;
        } else {
          // this.$message.error('查询列表失败', 1000);
          console.log('查询列表失败:', res);
          // 错误时重置数据，避免显示异常
          this.standardList = { total: 0, rows: [] };
          this.hasMore = false;
        }
      }).catch(error => {
        console.error('查询失败:', error);
        // this.$message.error('查询失败，请稍后重试', 1000);
        this.standardList = { total: 0, rows: [] };
        this.hasMore = false;
      }).finally(() => {
        // 无论成功失败，都要关闭加载状态
        this.isLoading = false;
      });
    },
    // 加载更多数据
    loadMore() {
      // 设置加载状态
      this.isLoading = true;
      this.currentPage++;
      getStandardList({
        type: 2,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        ...(this.searchQuery && this.searchQuery.trim() !== '' ? { title: this.searchQuery } : {}),
        // 优先使用分类选择的值作为industryId，如果分类未选择则使用行业选择的值
        ...((this.selectedCategory && this.selectedCategory !== '' && this.selectedCategory !== null && this.selectedCategory !== undefined) ? 
           { industryId: this.selectedCategory } : 
           (this.selectedIndustry && this.selectedIndustry !== '' && this.selectedIndustry !== null && this.selectedIndustry !== undefined ? 
            { industryId: this.selectedIndustry } : {})),
        ...(this.selectedStatus && this.selectedStatus !== '' && this.selectedStatus !== null && this.selectedStatus !== undefined ? { status: this.selectedStatus } : {})
      }).then(res => {
        if (res.code === 200) {
          // 追加新数据到现有列表
          this.standardList.rows = [...this.standardList.rows, ...(res.rows || [])];
          // 更新总数
          this.standardList.total = res.total || 0;
          // 检查是否还有更多数据
          this.hasMore = this.standardList.rows.length < this.standardList.total;
        } else {
          console.log('加载更多失败:', res);
          this.hasMore = false;
        }
      }).catch(error => {
        console.error('加载更多失败:', error);
        this.hasMore = false;
      }).finally(() => {
        // 无论成功失败，都要关闭加载状态
        this.isLoading = false;
      });
    },
    handleDetailClick(item) {
      //console.log(item);
      this.$router.push({
        path: '/guochanDetail',
        query: {
          id: item.id
        }
      })
    },
    // 已将分页相关方法移除，改为查看更多功能
    // async handleSizeChange(val) {
    //   this.pageSize = val;
    //   this.QueryList()
    // },
    // async handleCurrentChange(val) {
    //   this.currentPage = val;
    //   this.QueryList()
    // },

  }
};
</script>

<style scoped>
.standards-management-container {
  /* 使用负边距抵消main-content的padding */
  margin: -10px;
  padding: 20px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  background-color: #152133;
  /* 确保背景色填充整个区域 */
  min-height: calc(100vh - 80px);
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}

.search-card {
  width: 1600px;
  margin: 0 auto;
  margin-bottom: 20px;
  background-color: #04142B;
  border: none;
}

/* 修改为纵向排列 */
.search-filters {
  display: flex;
  flex-direction: column;
  /* 设置为列方向 */
  gap: 15px;
  /* 垂直间距 */
  padding: 15px 0;
}

/* 每个筛选组单独占一行 */
.filter-group {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  /* 移除底部边距 */
  width: 100%;
}

.filter-label {
  margin-right: 10px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 60px;
  color: #fff;
  /* 固定标签宽度，确保对齐 */
}

/* 查询输入组也改为纵向排列的一部分 */
.search-input-group {
  display: flex;
  align-items: center;
 
  margin-left: 0;
  /* 移除左边距 */
  width: 100%;
}

/* 查询重置按钮 */
.resetbutton{
  width: 92px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #182F50;
  transform: skew(-10deg);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-radius: 4px;
border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
}
.resetbutton span{
  transform: skew(10deg);
}
/* 移除重置按钮点击时的黑色边框 */
.resetbutton:focus {
  outline: none !important;
  border: 1px solid #1A9AD9;
  background: #182F50;
}
.resetbutton2{
  width: 92px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
  display: flex;
  margin: 0px 10px;

  align-items: center;
  justify-content: center;
  /* background: #182F50; */
  transform: skew(-10deg);
background: linear-gradient( 180deg, rgba(0,135,255,0.25) 0%, rgba(0,135,255,0.52) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
}
.resetbutton2 span{
  transform: skew(10deg);
}
/* 移除重置按钮点击时的黑色边框 */
.resetbutton2:focus {
  outline: none !important;
  border: 1px solid #1A9AD9;
  background: #182F50;
}

/* 查看更多按钮容器 */
.load-more-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* 查看更多按钮样式 */
.load-more-button {
  width: 404px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  cursor: pointer;
  background-image: url(../assets/img/pro/watchother.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* 查看更多按钮悬浮效果 */
.load-more-button:hover {
  /* background-image: url('~@/assets/pro/watchother2.png'); */
  background-image: url(../assets/img/pro/watchother2.png);

}
.resetbutton2:hover {
  background: linear-gradient( 360deg, #0085FF 0%, rgba(0,163,255,0) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 1 1;
border-top:none ;
}

/* 查询重置按钮 */
/* 单选按钮组在小屏幕上自动换行 */
:deep(.el-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* 全部按钮样式 */
.all-button {
  width: 58.8px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  cursor: pointer;
  border: 1px solid white;
  background: none;
  transform: skew(-5deg);
  border-radius: 4px;
  margin-right: 10px;
}

/* 全部按钮激活状态样式 */
.all-button.active {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%);
  border: 1px solid;
  border-top: none;
  border-radius: 4px;
  margin-right: 10px;
  
  transform: skew(-5deg);
  border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 1 1;
}

/* 全部按钮悬浮效果 */
.all-button:hover {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%);
  border: 1px solid;
  border-top: none;
  border-radius: 4px;
  border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 1 1;
}

.result-card {
  text-align: center;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  background-color: #04142B;
  border: none;
  width: 1600px;
  margin: 0 auto;
}

.result-info {
  font-size: 14px;
  color: #606266;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .standards-management-container {
    padding: 10px;
  }

  .result-card {
    padding: 20px;
  }

  .filter-label {
    min-width: 50px;
    /* 小屏幕上标签宽度稍小 */
  }

  .search-input-group {
    flex-wrap: wrap;
  }
}

/* 下面模块 */
.standard-item {
  /* border: 1px solid #e0e0e0; */
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
  margin: 5px 0;
  color: white;
  border: 1px solid transparent;
}

.standard-item:hover {
  background: linear-gradient(90deg, #1A3B6B 0%, rgba(26, 59, 107, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  cursor: pointer;
  border-color: transparent;
  border-radius: 8px;

}

/* 第一行：标题和标签 */
.first-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
}

.standard-title {
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  font-weight: 500;
  font-size: 18px;
  color: white;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 15px;
  text-align: right;
}

.tag {
  padding: 4px 10px;
  color: white;
  font-size: 12px;
  white-space: nowrap;
  display: inline-block;
  border: 1px solid white;
  transform: skew(-15deg);
}

.tag > span {
  transform: skew(15deg); /* 内层文字反向倾斜，保持水平 */
  display: inline-block; /* 确保转换生效 */
}

/* 第二行：浏览量、标准编号和日期信息 */
.second-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

.left-info {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 13px;
  text-align: left;
}

.view-count {
  color: #DDDDDD;
}

.standard-number {
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  font-weight: 400;
  color: rgba(221, 221, 221, 0.87);
}

.date-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 13px;
  color: white;
}

.date-separator {
  margin: 0 8px;
  color: white;
}

.publish-date,
.implement-date {
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 14px;
  color: rgba(221, 221, 221, 0.87);
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .standard-main-row {
    flex-direction: column;
  }

  .title-section {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .number-section {
    text-align: left;
  }

  .date-info {
    justify-content: flex-start;
  }
}

/* 按钮 */
:deep(.el-card__header) {
  border: none;
}

:deep(.el-radio-button) {
  margin-right: 5px;
}

/* 单选按钮背景颜色跟随页面背景并添加倾斜效果 */
:deep(.el-radio-button__inner) {
  background-color: #152133;
  border-color: #fff;
  color: #fff;
  border: 1px solid #fff;
  /* 添加倾斜效果 */
  transform: skew(-5deg);
  /* 确保文字居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px !important;

}

/* 鼠标悬浮时的渐变背景效果 */
:deep(.el-radio-button:hover .el-radio-button__inner) {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(0, 163, 255, 0.5);
  border-top: none;
  /* border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 0.5 0.5; */
}

/* 选中状态样式 */
:deep(.el-radio-button.is-active .el-radio-button__inner) {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 1 1;
}


/* 按钮 */
/* 输入框 */

:deep(.el-input) {
  /* 设置输入框背景跟随主题色 */
  --el-input-bg-color: #152133;
  transform: skew(-5deg);

}

:deep(.el-input__inner) {
  /* 背景色跟随主题 */
  background-color: #152133 !important;
  /* 边框始终为白色 */
  border-color: white !important;
  /* 文字颜色为白色 */
  color: white !important;
}

/* 聚焦状态也保持白色边框 */
:deep(.el-input__inner:focus) {
  border-color: white !important;
  /* 移除默认的聚焦阴影效果或调整为浅色 */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* 清除按钮样式 */
:deep(.el-input__clear) {
  color: white !important;
}

/* 搜索图标颜色 */
:deep(.el-input__prefix-inner .el-input__icon) {
  color: white !important;
}

/* 输入框 */

/* 查询和重置按钮样式 */


/* 查询按钮特殊处理（如果需要保留primary类型的特殊性） */
:deep(.el-button--primary) {
  background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%) !important;
  border: none !important;
   background-color: transparent !important;
  /* 设置基础渐变背景 */
  /* background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%) !important; */
  /* 确保文字为白色 */
  color: white !important;
  /* 移除默认边框或设置为透明 */
  /* border: none !important; */
    border: 1px solid #1A9AD9;

  /* 确保按钮内文字和图标颜色一致 */
  transform: skew(-5deg);
  width: 90px;
  height: 30px;
  border: 1px solid;
}

/* 查询按钮hover效果 */
:deep(.el-button--primary:hover) {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%) !important;
  border-color: transparent !important;
}

/* 按钮图标样式 */
:deep(.el-button__icon) {
  color: white !important;
}


/* 分页 */
:deep(.el-pagination__total) {
  color: #fff;
}

:deep(.el-pagination__jump) {
  color: #fff;
}


/* 查询和重置按钮样式 */
</style>
<style>
.el-radio-button__inner:focus {
  outline: none;
}

.el-button:focus {
  outline: none;
}


</style>